import * as React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import {NavigationProp} from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';
import {homeRouterList} from '../router';

// 2. 创建首页相关导航栈
const HomeStackNavigator = createNativeStackNavigator();
// 首页主界面（包含跳转按钮）
const HomeScreen = ({navigation}: {navigation: NavigationProp<any>}) => {
  return (
    <ScrollView contentContainerStyle={styles.scrollView}>
      <View style={styles.container}>
        {homeRouterList.map((item, index) => (
          <TouchableOpacity
            key={index}
            style={[styles.iconContainer]}
            activeOpacity={0.8}
            onPress={() => navigation.navigate(item.id)}>
            <Icon
              name={item.icon}
              size={48}
              color={item.color}
              style={styles.icon}
            />
            <Text style={[styles.label, {color: item.color}]}>{item.name}</Text>
          </TouchableOpacity>
        ))}
      </View>
    </ScrollView>
  );
};

// 首页的导航栈配置
export const HomeStack = () => {
  return (
    <HomeStackNavigator.Navigator>
      <HomeStackNavigator.Screen
        name="首页"
        component={HomeScreen}
        options={{headerShown: false, headerTitle: ''}}
      />
      {homeRouterList.map(item => (
        <HomeStackNavigator.Screen
          key={item.id}
          name={item.id}
          component={item.component}
          options={{headerTitle: item.name}}
        />
      ))}
    </HomeStackNavigator.Navigator>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'flex-start',
    padding: 10,
  },
  iconContainer: {
    flexBasis: '25%', // 占屏幕宽度的 25%
    alignItems: 'center',
    padding: 10,
    paddingHorizontal: 5,
    boxSizing: 'border-box',
    marginBottom: 10,
  },
  icon: {
    marginBottom: 5,
  },
  label: {
    fontSize: 12,
    fontWeight: '500',
    textAlign: 'center',
  },
  scrollView: {
    // backgroundColor: '#F5F5F5'
  },
});
